import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Button

A button.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.button/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FButton(
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create button
```

## Usage

### `FButton(...)`

```dart copy
FButton(
  style: FButtonStyle(...),
  mainAxisSize: MainAxisSize.min,
  onPress: () {},
  onSecondaryPress: () {},
  onSecondaryLongPress: () {},
  shortcuts: { SingleActivator(LogicalKeyboardKey.enter): ActivateIntent() },
  actions: { ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {}) },
  child: const Text('Button'),
);
```

### `FButton.raw(...)`

```dart copy
FButton.raw(
  style: FButtonStyle(...),
  onPress: () {},
  onSecondaryPress: () {},
  onSecondaryLongPress: () {},
  shortcuts: { SingleActivator(LogicalKeyboardKey.enter): ActivateIntent() },
  actions: { ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {}) },
  child: const Text('Button'),
);
```

## Examples

### Appearance

#### Primary

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FButton(
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Secondary

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{style: 'secondary'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      style: FButtonStyle.secondary(),
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Destructive

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{style: 'destructive'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      style: FButtonStyle.destructive(),
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Outline

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{style: 'outline'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      style: FButtonStyle.outline(),
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Ghost

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='text' query={{style: 'ghost'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      style: FButtonStyle.ghost(),
      onPress: () {},
      child: const Text('Button'),
    );
    ```
  </Tabs.Tab>
</Tabs>

### Content

#### With Text and Icon

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='icon' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      prefix: Icon(FIcons.mail),
      onPress: () {},
      child: const Text('Login with Email'),
    ),
    ```
  </Tabs.Tab>
</Tabs>

#### With Only Icon

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='only-icon' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {3} copy
    FButton.icon(
      onPress: () {},
      child: Icon(FIcons.chevronRight),
    ),
    ```
  </Tabs.Tab>
</Tabs>

#### With Circular Progress

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='button' variant='circular-progress' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2} copy
    FButton(
      prefix: const FCircularProgress(),
      onPress: null,
      child: const Text('Please wait'),
    ),
    ```
  </Tabs.Tab>
</Tabs>
